<template>
	<view class="change-password-container page-container-with-bottom-btn">

		<!-- 表单区域 -->
		<view class="form-section">
			<view class="form-card">

				<view class="form-content">

					<view class="form-item">
						<text class="form-label">当前手机号</text>
						<text class="current-phone">{{ maskedCurrentPhone }}</text>
					</view>

					<view class="form-item">
						<text class="form-label">
							<text class="label-text">验证码</text>
							<text class="required">*</text>
						</text>
						<view class="verify-code-wrapper">
							<input class="verify-input" v-model="formData.verifyCode" placeholder="请输入6位验证码"
								type="number" maxlength="6" />
							<view class="verify-btn" :class="{ disabled: countdown > 0 }" @click="sendVerifyCode">
								<text class="verify-btn-text">{{ countdown > 0 ? `${countdown}s后重发` : '获取验证码' }}</text>
							</view>
						</view>
					</view>

					<!-- 新密码 -->
					<view class="form-item">
						<view class="item-label">
							<text class="label-text">新密码</text>
							<text class="required">*</text>
						</view>
						<u-input v-model="formData.newPassword" type="password" placeholder="请输入新密码" maxlength="20"
							border="surround" customStyle="background-color: #fafafa"></u-input>
						<text class="input-tip">密码长度为6-20位，建议包含字母和数字</text>
					</view>

					<!-- 确认新密码 -->
					<view class="form-item">
						<view class="item-label">
							<text class="label-text">确认新密码</text>
							<text class="required">*</text>
						</view>
						<u-input v-model="formData.confirmPassword" type="password" placeholder="请再次输入新密码"
							maxlength="20" border="surround" customStyle="background-color: #fafafa"></u-input>
					</view>
				</view>
			</view>
		</view>

		<view class="tips-section">
			<text class="tips-title">温馨提示：</text>
			<text class="tips-text">• 验证码有效期为5分钟</text>
		</view>

		<!-- 底部固定按钮 -->
		<view class="bottom-actions fixed-bottom-safe">
			<button class="submit-btn" :class="{ disabled: !canSubmit || loading }" @click="submitForm"
				:disabled="!canSubmit">
				<text class="submit-btn-text">{{ loading ? '修改中...' : '确认修改' }}</text>
			</button>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'

	import {
		maskPhone,
		validatePhone,
		validateVerifyCode
	} from '@/common/validate.js'

	export default {
		data() {
			return {
				countdown: 0,
				loading: false,
				formData: {
					verifyCode: '',
					newPassword: '',
					confirmPassword: ''
				},
				currentPhone: ''
			}
		},
		computed: {
			...mapGetters(['isLogin', 'userInfo']),

			// 脱敏显示当前手机号
			maskedCurrentPhone() {
				return maskPhone(this.currentPhone)
			},

			canSubmit() {
				return this.formData.newPassword.trim() &&
					this.formData.confirmPassword.trim() &&
					this.formData.verifyCode &&
					this.formData.verifyCode.length === 6
			}
		},
		onLoad() {
			this.currentPhone = this.$secret.decryptAES(this.userInfo.mobile)
		},
		methods: {
			// 验证手机号格式
			isValidPhone(phone) {
				return validatePhone(phone)
			},

			// 发送验证码
			async sendVerifyCode() {
				if (this.countdown > 0 || !this.isValidPhone(this.currentPhone)) {
					if (!this.isValidPhone(this.currentPhone)) {
						uni.showToast({
							title: '请输入正确的手机号',
							icon: 'none'
						})
					}
					return
				}

				this.$api.user.GetVerifyCode({
					mobile: this.currentPhone
				}).then(res => {
					uni.showToast({
						title: '验证码已发送',
						icon: 'success'
					})

					this.startCountdown()
				})
			},

			// 开始倒计时
			startCountdown() {
				this.countdown = 60
				const timer = setInterval(() => {
					this.countdown--
					if (this.countdown <= 0) {
						clearInterval(timer)
					}
				}, 1000)
			},

			// 验证表单
			validateForm() {
				if (!this.formData.verifyCode.trim()) {
					uni.showToast({
						title: '请输入手机验证码',
						icon: 'none'
					})
					return false
				}

				if (!validateVerifyCode(this.formData.verifyCode, 6)) {
					uni.showToast({
						title: '验证码为6位数字',
						icon: 'none'
					})
					return false
				}

				if (!this.formData.newPassword.trim()) {
					uni.showToast({
						title: '请输入新密码',
						icon: 'none'
					})
					return false
				}

				if (this.formData.newPassword.length < 6) {
					uni.showToast({
						title: '新密码长度不能少于6位',
						icon: 'none'
					})
					return false
				}

				if (!this.formData.confirmPassword.trim()) {
					uni.showToast({
						title: '请确认新密码',
						icon: 'none'
					})
					return false
				}

				if (this.formData.newPassword !== this.formData.confirmPassword) {
					uni.showToast({
						title: '两次输入的密码不一致',
						icon: 'none'
					})
					return false
				}

				// if (this.formData.currentPassword === this.formData.newPassword) {
				// 	uni.showToast({
				// 		title: '新密码不能与当前密码相同',
				// 		icon: 'none'
				// 	})
				// 	return false
				// }

				return true
			},

			// 提交表单
			async submitForm() {
				if (!this.canSubmit || this.loading) {
					return
				}

				if (!this.validateForm()) {
					return
				}

				uni.showLoading({
					title: '修改中...'
				})

				this.loading = true

				this.$api.user.updateUserBaseInfo({
					info: {
						password_login: this.formData.newPassword
					},
					verifyMobile: this.currentPhone,
					captcha: this.formData.verifyCode
				}).then(res => {
					this.loading = false
					this.userInfo.has_password_login = '已设置'
					this.$store.dispatch('updateUserInfo', this.userInfo)
					uni.hideLoading()
					uni.showToast({
						title: res.msg,
						icon: 'success'
					})
					setTimeout(() => {
						uni.navigateBack()
					}, 1500)
				}).catch(error => {
					this.loading = false
					uni.hideLoading()
					uni.showToast({
						title: error.message || '修改失败，请重试',
						icon: 'none'
					})
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.change-password-container {
		background-color: #f8f8f8;
		min-height: 100vh;
	}

	.form-section {
		padding: 20rpx 20rpx 0;
	}

	.form-card {
		background-color: #ffffff;
		border-radius: 16rpx;
		overflow: hidden;
	}

	.form-content {
		padding: 40rpx;
	}

	.form-item {
		margin-bottom: 40rpx;
	}

	.form-item:last-child {
		margin-bottom: 0;
	}

	.item-label {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.label-text {
		font-size: 28rpx;
		color: #333;
	}

	.required {
		color: #ff4757;
		margin-left: 8rpx;
	}


	.input-tip {
		font-size: 24rpx;
		color: #999;
		margin-top: 16rpx;
		display: block;
	}

	.bottom-actions {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #ffffff;
		border-top: 2rpx solid #e5e5e5;
		padding: 30rpx;
		padding-bottom: calc(30rpx + env(safe-area-inset-bottom));
		z-index: 999;
	}

	.submit-btn {
		width: 100%;
		height: 88rpx;
		background-color: #1c705e;
		border-radius: 44rpx;
		border: none;
		font-size: 32rpx;
		font-weight: bold;
		color: #ffffff;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.submit-btn:disabled {
		background: #cccccc;
		color: #999999;
	}

	.submit-btn:not(:disabled):active {
		transform: scale(0.98);
		transition: transform 0.1s;
	}

	/* 手机验证码 */
	.form-label {
		display: block;
		font-size: 28rpx;
		color: #333;
		margin-bottom: 15rpx;
		font-weight: 500;
	}

	.current-phone {
		font-size: 32rpx;
		color: #52a58a;
		font-weight: bold;
	}

	.form-input {
		width: 100%;
		height: 88rpx;
		border: 2rpx solid #e5e5e5;
		border-radius: 12rpx;
		padding: 0 20rpx;
		font-size: 28rpx;
		background-color: #fff;
	}

	.form-input:focus {
		border-color: #52a58a;
	}

	.verify-code-wrapper {
		display: flex;
		align-items: center;
		gap: 20rpx;
	}

	.verify-input {
		flex: 1;
		height: 88rpx;
		border: 2rpx solid #e5e5e5;
		border-radius: 12rpx;
		padding: 0 20rpx;
		font-size: 28rpx;
		background-color: #fff;
	}

	.verify-input:focus {
		border-color: #52a58a;
	}

	.verify-btn {
		width: 200rpx;
		height: 88rpx;
		background-color: #52a58a;
		border-radius: 12rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
	}

	.verify-btn.disabled {
		background-color: #e5e5e5;
		cursor: not-allowed;
	}

	.verify-btn-text {
		color: white;
		font-size: 26rpx;
	}

	.verify-btn.disabled .verify-btn-text {
		color: #999;
	}

	.tips-section {
		background-color: white;
		border-radius: 16rpx;
		padding: 30rpx;
	}

	.tips-title {
		display: block;
		font-size: 28rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 20rpx;
	}

	.tips-text {
		display: block;
		font-size: 26rpx;
		color: #666;
		line-height: 1.6;
		margin-bottom: 10rpx;
	}

	.tips-text:last-child {
		margin-bottom: 0;
	}
</style>